<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>MouseEnter and MouseLeave Event Tests</title>

	<link rel="stylesheet" type="text/css" href="../../../../build/cssreset/reset-min.css">
	<link rel="stylesheet" type="text/css" href="../../../../build/cssbase/base-min.css">
	<style type="text/css">

		.container {
			background-color: #ccc;
			padding: 20px;
			margin: 10px 0;
			border-width: 1px;
			border-style: solid;
			border-color: #ccc;
		}

		.container.hover {
			background-color: #fc0;
		}

		.container ul {
			list-style: none;
			padding: 10px;
			margin: 0;
			background-color: #333;
		}

		.container ul li {
			margin: 10px;
			padding: 1px;
			background-color: #999;
			border-width: 1px;
			border-style: solid;
			border-color: #999;
		}

		.container ul li.hover {
			background-color: #ff6;
		}

		.container ul li em {
			display: block;
			margin: 10px;
			padding: 5px;
			background-color: #666;
		}

		.outline,
		.container ul li.outline {
			border-color: #f00;
		}

		.container.focus {
			background-color: blue;
		}

	</style>

    <!--script src="/sand/delegate_leak_files/heapsize.js"></script-->
	<script type="text/javascript" src="../../../../build/yui/yui.js"></script>
	<!--script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/yui/yui.js"></script-->

	<script type="text/javascript">
		YUI({
            //base: '../../../../build/',
            filter: 'raw'
        }).use('event-custom', 'event', 'node-style', function (Y) {

            /*
            var count = 0;
            Y.one = (function (original) {
                return function () {
                    count++;
                    return original.apply(Y, arguments);
                };
            })(Y.one);
            */

            //var memsnap = trackMemory(Y);

			var onContainerMouseEnter = function (event) {

				if (event.currentTarget == this) {
					this.addClass("hover");
				}

			};

			var onContainerMouseLeave = function (event) {

				if (event.currentTarget == this) {
					this.removeClass("hover");
				}

			};

			var onLIMouseEnter = function (event) {

				if (event.container.get("id") == "container-1") {
					this.addClass("hover");
				}

			};

			var onLIMouseLeave = function (event) {

				if (event.container.get("id") == "container-1") {
					this.removeClass("hover");
				}

			};

			var addContainerOutline = function (event, className) {

				event.currentTarget.addClass(className);

			};

			var removeContainerOutline = function (event) {

				event.currentTarget.removeClass(this);

			};


			var addLIOutline = function (event, className) {

				event.currentTarget.addClass(className);

			};

			var removeLIOutline = function (event) {

				event.currentTarget.removeClass(this);

			};

			var setLIColor = function (event) {

				this.setStyle("color", "#fff");

			};

			var removeLIColor = function (event) {

				this.setStyle("color", "");

			};

			var handle1 = Y.on("mouseenter", onContainerMouseEnter, "#container-1");
			var handle2 = Y.on("mouseleave", onContainerMouseLeave, "#container-1");

			var handle3 = Y.on("mouseenter", addContainerOutline, "#container-1", Y, "outline");
			var handle4 = Y.on("mouseleave", removeContainerOutline, "#container-1", "outline");

			var handle5 = Y.on("mouseenter", setLIColor, "#container-1 li");
			var handle6 = Y.on("mouseleave", removeLIColor, "#container-1 li");

			var handle7 = Y.delegate("mouseenter", onLIMouseEnter, "#container-1", "li");
			var handle8 = Y.delegate("mouseleave", onLIMouseLeave, "#container-1", "li");

			var handle9 = Y.delegate("mouseenter", addLIOutline, "#container-1", "li", Y, "outline");
			var handle10 = Y.delegate("mouseleave", removeLIOutline, "#container-1", "li", "outline");


			Y.on("click", function () {

				handle1.detach();
				handle2.detach();
				handle3.detach();
				handle4.detach();
				handle5.detach();
				handle6.detach();
				handle7.detach();
				handle8.detach();
				handle9.detach();
				handle10.detach();

			}, "#remove-listeners");

            document.getElementById('memsize').onclick = function () {
                //memsnap();
                //console.log(count);
                console.log(Y.Object.keys(Y.Node._instances).length);
            };
		});
	</script>

</head>
<body>

	<h1>MouseEnter and MouseLeave Event Tests</h1>

	<ul>
		<li>The background color of the <code>div</code> element should turn
		orange and have a red outline when you move the mouse over it.</li>
		<li>The background color of each <code>li</code> should change to yellow
		when you mouse over it and have a red outline.</li>
	</ul>

	<div id="container-1" class="container">
		<ul id="ul-1">
			<li id="li1">
                <p><span>This</span></p>
                <p><em>is</em></p>
                <p><strong>a</strong></p>
                <p><q>bunch</q></p>
                <blockquote><p>of</p></blockquote>
                <div>
                    <div>
                        <div>
                            <div>
                                <p>paragraphs</p>
                            </div>
                        </div>
                    </div>
                </div>
                <em id="em1">Item Type One</em>
            </li>
			<li id="li2"><em id="em2">Item Type Two</em></li>
			<li id="li3"><em id="em3">Item Type Three</em></li>
		</ul>
	</div>

	<button id="remove-listeners">Remove Listeners</button>
    <button id="memsize">Check memory</button>

</body>
</html>
